<template>
    <div class="song-right">
        <!-- 相似歌单 -->
        <el-card v-if="playlists.length > 0">
            <template #header>
                <div style="border-left: 5px solid black; padding-left: 10px;">包含这首歌的歌单</div>
            </template>
            <div class="songlist">
                <div class="song" v-for="item in playlists" :key="item">
                    <el-row :gutter="0">
                        <el-col :span="4">
                            <el-image :src="item.coverImgUrl" class="song-img" :fit="'cover'"></el-image>
                        </el-col>
                        <el-col :span="20">
                            <div>
                                <el-link @click="router.push('/playlist/detail?id=' + item.id)" :title="item.description"
                                    class="song-name" type="info">
                                    {{ item.name }}
                                </el-link>
                            </div>
                            <div>
                                <el-link @click="router.push('/singer/detail?id=' + item.creator.userId)"
                                    :title="item.creator.nickname" class="creator-name" type="info">
                                    by. {{ item.creator.nickname }}
                                </el-link>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-card>
        <div style="height: 50px;"></div>
        <!-- 相似歌手 -->
        <el-card v-if="artists.length > 0 && artists[0].length > 0">
            <template #header>
                <div style="border-left: 5px solid black; padding-left: 10px;">相似歌手</div>
            </template>
            <div class="arlist">
                <!-- 使用轮播图，每页5个歌手 -->
                <el-carousel :interval="5000" height="110px" :arrow="'never'">
                    <el-carousel-item v-for="list in artists" :key="list">
                        <div class="list">
                            <div class="ar" v-for="item in list" :key="item">
                                <el-link @click="router.push('/home?id=' + item.id)" :title="item.name" :underline="false"
                                    class="ar-img" type="info">
                                    <el-image :src="item.picUrl" :fit="'cover'"></el-image>
                                </el-link>
                                <div class="ar-name">
                                    <el-link @click="router.push('/home?id=' + item.id)" :title="item.name" type="info">
                                        {{ item.name }}
                                    </el-link>
                                </div>
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>

            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getSimiPlaylist, getSimiArtist } from '@/api/song'
import { useRoute, useRouter } from 'vue-router'

const props = defineProps({
    singerId: {
        type: Number,
        required: true
    }
})
const router = useRouter()
const route = useRoute()
const id = ref('')
const playlists = ref([])
const artists = ref([])

onMounted(async () => {
    id.value = route.query.id
    const res = await getSimiPlaylist(id.value)
    playlists.value = res.playlists
    const res2 = await getSimiArtist(props.singerId)
    artists.value.push(res2.artists.splice(0, 5))
    artists.value.push(res2.artists.splice(5, 5))

})
</script>

<style lang="less" scoped>
.song-right {
    width: 420px;

    .songlist {
        .song {
            margin-bottom: 15px;

            .song-img {
                width: 60px;
                height: 60px;
                border-radius: 5px;
            }

            .song-name {
                margin: 5px 10px;
                font-size: 15px;
                color: #333;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            .creator-name {
                margin: 10px 10px;
                font-size: 12px;
                color: #666;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }

            &:nth-last-child(1) {
                margin-bottom: 0;
            }
        }
    }

    .arlist {
        height: 100px;

        :deep(.is-active .el-carousel__button) {
            background: #409eff;
            width: 20px;
        }

        :deep(.el-carousel__button) {
            width: 8px;
            height: 8px;
            border-radius: 4px;
            background: #909399;
        }

        .list {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;

            .ar {
                width: 60px;
                text-align: center;

                .el-link {
                    font-size: 12px;
                    color: #666;
                }

                .ar-img {
                    .el-image {
                        width: 60px;
                        height: 60px;
                    }
                }

                .ar-name {
                    margin-top: 5px;
                    font-size: 12px;
                    color: #333;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
            }
        }
    }
}
</style>